﻿<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
    TagPrefix="asp" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">
<head id="Head1" runat="server">
    <title>SilverlightApplication</title>
    <style type="text/css">
    
    #silverlightControlHost {
        height: 50px;
        width:100px;
        border:solid 1px red;
        float:left;
    }
    
    </style>
    <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
    <script type="text/javascript">

        var map = null;
        function GetMap() {
            map = new VEMap('mapDIV');
            map.LoadMap();
        }

        function doCities(country) {
            var slPlugin = document.getElementById("slControl");
            slPlugin.content.MySilverlightObject.upDateCities(country);
        }

        function MoveMap(where) {
            try {
                map.Find(null, where);
            }
            catch (e) {
                alert(e.message);
            }
        }
    
    </script>
    


    
</head>
<body onload='GetMap();' style="height:100%;margin:0;">
    <form id="form1" runat="server" style="height:100%;">
    
        
    
    
    
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        
        
        
        <div id='mapDIV' style="position: absolute; width: 443px; height: 417px; z-index: 2; left:301px; top: 0px"></div>
        
        <br />
        
        
        
        
        
        <div id='silverlightControlHost'  style="height:100%;">
            <asp:Silverlight ID="slControl" runat="server"  Source="~/ClientBin/SilverlightApplication1.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
        </div>
        
        
    <div style="float:left; width: 400px; height: 76px; left: 0px; top: 200px" id="JSLayer">
        <input id="bUK" type="button" value="U.S.A." onclick="doCities('U.S.A.');" />
        <input id="bGermany" type="button" value="Japan" onclick="doCities('Japan');"/>
        <input id="bFrance" type="button" value="Thailand" onclick="doCities('Thailand');" />
    </div>
        
    </form>
</body>
</html>